<template>
  <el-dialog
    v-model="dialogTableVisible"
    :title="selectIndex + selectItem.label"
  >
    <div class="app-search">
      <el-form :inline="true" class="demo-form-inline" v-model="form">
        <el-form-item label="答案文本">
          <el-input
            placeholder="请输入答案文本"
            v-model="form.content"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" plain>搜索</el-button>
          <el-button type="warning" @click="exportExcel" plain
            >导出Excel</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="listAnswer" border>
      <el-table-column type="index" label="序号" width="90" :index="tableIndex">
      </el-table-column>
      <el-table-column
        prop="answerTime"
        label="提交答卷时间"
        width="200"
        :formatter="formatDate"
      ></el-table-column>
      <el-table-column prop="answerContent" label="答案文本"></el-table-column>
      <el-table-column prop="address" label="查看答卷" width="100px">
        <template style="display: block" #default="scope">
          <el-button
            size="small"
            type="success"
            @click="goAnswerDetail(scope.row.uuid)"
            >查看答卷
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="locale">
      <el-pagination
        :total="total"
        :page-size="limit"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      >
      </el-pagination>
    </el-config-provider>
  </el-dialog>

  <div class="body">
    <div class="title">
      <span>{{ title }} [分析报告]</span>
      <el-button class="download" type="success" plain @click="download"
        >下载详细数据</el-button
      >
    </div>

    <div class="container">
      <div v-for="(item, index) in list" :key="index">
        <div class="table-title">
          <span class="num"> 第{{ index + 1 }}题:</span
          ><span class="sub-title">{{ item.label }}</span>
          <span
            class="type-title"
            v-if="item.type == 10 || item.type == 25 || item.type == 23|| item.type == 20"
          >
            [填空题]</span
          >
          <span v-if="item.type == 30" class="type-title">[单选题]</span>
          <span v-if="item.type == 40" class="type-title">[多选题]</span>
          <span v-if="item.type == 125" class="type-title">[手写签名]</span>
          <span v-if="item.type == 90" class="type-title">[日期选择题]</span>
          <span v-if="item.type == 70" class="type-title">[图片上传题]</span>
          <span v-if="item.type == 27" class="type-title">[富文本题]</span>
          <span v-if="item.type == 60" class="type-title">[下拉选择题]</span>
          <span v-if="item.type == 80" class="type-title">[文件上传题]</span>
          <span v-if="item.type == 95" class="type-title">[时间选择题]</span>
          <span v-if="item.type == 97" class="type-title"
            >[日期时间选择题]</span
          >
          <span v-if="item.type == 100" class="type-title">[滑块评分题]</span>
          <span v-if="item.type == 50" class="type-title">[星级评价题]</span>
        </div>
        <div v-if="item.type == 125">
          <el-button @click="downloadFile(item, index)"
            >下载附件文件名列表</el-button
          >
          <span class="type-title"
            >共{{ item.analysisAnswer[0].percentage }}个文件</span
          >
        </div>
        <div v-if="item.type == 70">
          <el-button @click="downloadFile(item, index)"
            >下载图片文件名列表</el-button
          >
          <span class="type-title"></span>
        </div>
        <div v-if="item.type == 80">
          <el-button @click="downloadFile(item, index)"
            >下载文件名列表</el-button
          >
          <span class="type-title"></span>
        </div>
        <div
          v-if="
            item.type == 90 ||
            item.type == 95 ||
            item.type == 20 ||
            item.type == 50 ||
            item.type == 10 ||
            item.type == 25 ||
            item.type == 23 ||
            item.type == 97 ||
            item.type == 27 ||
            item.type == 100
          "
        >
          <el-button @click="catDetail(item, index)">查看详细数据</el-button>
        </div>
        <div v-if="item.type == 30 || item.type == 40 || item.type == 60">
          <el-table
            :data="item.analysisAnswer"
            :default-sort="{ prop: 'count', order: 'ascending' }"
            style="width: 100%"
            border
          >
            <el-table-column prop="label" label="选项" width="180" />
            <el-table-column prop="count" label="小计" sortable width="180" />
            <el-table-column prop="address" label="比例" :formatter="formatter">
              <template #default="scope">
                <el-progress
                  v-if="scope.row.percentage <= 100"
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="scope.row.percentage"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElMessageBox } from "element-plus";
import { saveAs } from "file-saver";
import { ElLoading } from 'element-plus/lib/components';

export default {
  name: "Analysis",
  components: {},
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.uuid = this.$route.query.p;
    this.queryByUUId();
  },
  data() {
    return {
      user: {},
      uuid: "",
      skip: true,
      title: "",
      questionnaireId: 0,
      list: [],
      dialogTableVisible: false,
      selectItem: {},
      selectIndex: "",
      page: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      listAnswer: [],
      form: {
        content: "",
      },
    };
  },
  methods: {
    onSubmit() {
      this.getList();
    },
    exportExcel() {
      httpService(
        "/javaApi/qtAnswer/exportExcel",
        {
          questionCode: this.selectItem.code,
          questionnaireId: this.questionnaireId,
        },
        "get"
      ).then((data) => {
        if (data.code == 200) {
          window.open(data.msg, "_blank");
        }
      });
    },
    goAnswerDetail(uuid) {
      let routeData = this.$router.resolve({
        name: "AnswerDetail",
        query: {
          q: uuid,
          p: this.uuid,
        },
      });
      window.open(routeData.href, "_blank");
    },
    tableIndex(index) {
      return this.page * this.pageSize + index + 1;
    },
    catDetail(e, index) {
      this.dialogTableVisible = true;
      this.selectItem = e;
      this.listAnswer = [];
      this.selectIndex = "第" + (index + 1) + "题：";
      this.getList();
    },
    downloadFile(e, index) {
      //下载附件
      httpService(
        "/javaApi/qtAnswer/downloadFile",
        {
          questionCode: e.code,
          questionnaireId: this.questionnaireId,
        },
        "get"
      ).then((data) => {
        let str = new Blob([data], { type: "text/plain;charset=utf-8" });
        saveAs(str, this.uuid + ".txt");
      });
    },
    getList() {
      //根据题目id查询答案列表
      httpService(
        "/javaApi/qtAnswer/list/" + this.page + "/" + this.pageSize,
        {
          questionCode: this.selectItem.code,
          questionnaireId: this.questionnaireId,
          answerContent: this.form.content,
          answerType: this.selectItem.type,
        },
        "get"
      ).then((data) => {
        for (var i = 0; i < data.list.length; i++) {
          if (data.list[i].answerType == 90) {
            if (
              data.list[i].answerContent != null &&
              data.list[i].answerContent.length > 10
            ) {
              data.list[i].answerContent = data.list[i].answerContent.substring(
                0,
                10
              );
            }
          }
        }
        this.listAnswer = data.list;
        this.total = data.total;
        this.pageCount = data.pages;
      });
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;
      this.getList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getList();
    },
    queryByUUId() {
      httpService(
        "/javaApi/qtQuestionnaire/queryAnalysisByUUId",
        "uuid=" + this.uuid,
        "post"
      ).then((data) => {
        if (data) {
          this.title = data.title;
          this.questionnaireId = data.id;
          let upList = data.qtQuestions;
          this.list = upList;
        } else {
          this.$router.push({
            path: "/noFound",
          });
        }
      });
    },
    download() {

        var loadingInstance = ElLoading.service({
            lock: true,
        });
        //加入进度条
      httpService(
        "/javaApi/qtQuestionnaire/downloadDetail",
        "uuid=" + this.uuid,
        "post"
      ).then((data) => {
        loadingInstance.close()
        if (data != "") {

          window.open(data.msg);
        } else {
        }
      });
    },
    formatDate(row, column) {
      let data = row[column.property];
      let dt = new Date(data);
      let month = dt.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let hours = dt.getHours();
      if (hours < 10) {
        hours = "0" + hours;
      }
      let mDate = dt.getDate();
      if (mDate < 10) {
        mDate = "0" + mDate;
      }
      let minutes = dt.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = dt.getSeconds();
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return (
        dt.getFullYear() +
        "-" +
        month +
        "-" +
        mDate +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
};
</script>
<style scoped>
.num {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.sub-title {
  font-size: 16px;
  color: #262626;
  font-weight: 400;
}
.type-title {
  font-size: 16px;
  color: #a6a6a6;
  margin-left: 10px;
}
.body {
  background: #f2f2f2;
}
.container {
  width: calc(70% - 100px);
  background: white;
  padding: 10px 50px 100px 50px;
  margin: 0 auto;
  min-height: calc(100vh - 208px);
}
.title {
  /* position: fixed; */
  width: 100%;
  font-size: 26px;
  padding: 20px;
  border-bottom: 1px solid #dedede;
  text-align: center;
  background: white;
  color: #409EFF;
}
.table-title {
  padding-bottom: 20px;
  padding-top: 30px;
}
.download {
  margin-left: 10px;
}
</style>
<style >
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  box-sizing: border-box;
  width: 50%;
}
.el-dialog__header {
  border-bottom: 1px solid #dedede;
}
</style>